<template>
    <div class="main_container">
        <div v-if="pageName=='index'">
            <el-row style="height: 40px;line-height: 40px;margin: 10px 20px 25px 20px;">
                <el-col :span="7">
                    <span style="font-size: 14px;color: #606266;width: auto;">日期范围：</span>
                    <el-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" 
                        v-model="dateRange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                        :picker-options="handleTime" @change="dateChange"
                        placeholder="请选择日期范围" style="width: 240px;" clearable></el-date-picker>
                </el-col>
                <el-col :span="7">
                    <span style="font-size: 14px;color: #606266;width: auto;">产品名称：</span>
                    <el-input style="width: 240px" v-model="params.goods_name" placeholder="请输入"
                        maxlength="50" clearable></el-input>
                </el-col>
                <el-col :span="10">
                    <!-- <div class="btns"> -->
                        <el-button size="small" class="btn_primary_color" icon="el-icon-search" @click="getData">查询</el-button>
                        <!-- <el-button size="small" style="margin-right: 10px;" icon="el-icon-upload2" @click="handleExport">导出</el-button> -->
                        <!-- <el-button size="small" class="btn_primary_color" icon="el-icon-printer" @click="handlePrint">打印</el-button> -->
                    <!-- </div> -->
                </el-col>
            </el-row>

            <div class="common_line"></div>
            <el-row style="padding: 5px 14%;">
                <el-col :span="8" class="flex_div">
                    <span class="top_title">入库总计</span>
                    <span class="money order green">{{ totalData.buyCounts }}</span>
                </el-col>
                <el-col :span="8" class="flex_div">
                    <span class="top_title">库存剩余</span>
                    <span class="money order green">{{ totalData.lastCounts }}</span>
                </el-col>
                <el-col :span="8" class="flex_div">
                    <span class="top_title">库存总额(估值)</span>
                    <span class="money" :class="totalData.allMoney<0?'red':'green'">{{ totalData.allMoney.toFixed(2) }}</span>
                </el-col>
            </el-row>

            <div class="common_line"></div>
            <el-table border :data="tableData" :max-height="tableHeight" v-loading="loading" style="margin-top: 15px;">
                <el-table-column label="商品图片" align="center" width="100" prop="imageUrl">
                    <template slot-scope="scope">
                        <el-popover
                            placement="right"
                            width="240"
                            trigger="hover">
                            <img :src="scope.row.imageUrl" style="width: 240px;height: 240px;" alt="">
                            <img slot="reference" :src="scope.row.imageUrl" style="width: 32px;height: 32px;" alt="">
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="title" />
                <el-table-column label="商品编号" align="center" prop="goods_no" />
                <el-table-column label="单位" align="center" prop="unitName" />
                <el-table-column label="入库总数" align="center" prop="inbound" />
                <el-table-column label="出库总数" align="center" prop="outbound" />
                <el-table-column label="成本价" align="center" prop="inventory_unit_price_name" />
                <el-table-column label="库存金额" align="center" prop="valuation_remaining_price_name" />
                <el-table-column label="可用库存" align="center" prop="remaining">
                    <template slot-scope="scope">
                        <span style="color: red;" alt="">{{ scope.row.remaining }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="规格" align="center" prop="specifications" />
                <el-table-column label="型号" align="center" prop="type" />
                <el-table-column label="操作" width="120" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="toDetail(scope.row)"
                            style="font-weight: bold;color: #0099ff;"
                        >库存流水</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-show="total>0"
                background
                style="padding: 32px 16px;background: #fff;text-align: right;"
                @size-change="handleSizeChange"
                @current-change="getNextPageList"
                :current-page.sync="pageParam.page"
                :page-size="pageParam.num"
                layout="total, prev, pager, next, sizes, jumper"
                :page-sizes="[10, 20, 50, 100]"
                :total="total">
            </el-pagination>
        </div>
        
        <!-- 库存流水 -->
        <common-dialog :visiable="pageName == 'flow'">
            <stocking-flow :option="option" @hidden="pageName='index'"></stocking-flow>
        </common-dialog>
    </div>
</template>

<script>
import { stockStatistic } from '@/api/statistics'
import commonDialog from "@/components/commonDialog";

export default {
    name: 'stock',
    data() {
        return {
            params: {
                corp_id: '',
                start_date: '',
                end_date: '',
                order_type: 'customize_date',
            },
            pageName: 'index',
            loading: false,
            pageParam: {
                page: 1,
                num: 10
            },
            tableHeight: 420,
            total: 0,
            totalLists: [],
            dateRange: [],
            handleTime: {
                disabledDate(date) {
                    //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
                    return date.getTime() > Date.now();
                }
            },
            totalData: {
                buyCounts: 0,  //入库总数
				lastCounts: 0,  //剩余总数
				allMoney: 0,  //库存总金额
            },
            tableData: [],
            option: {}
        }
    },
    components: {
        commonDialog,
        stockingFlow: () => import('./stockingFlow.vue'),
    },
    created() {
        if (window.innerHeight > 1000) {
            this.tableHeight = window.innerHeight - 400
        }
        this.params.corp_id = this.$store.state.corpId
        this.getData()
    },
    methods: {
        // 补零
        add0(num) {
            if (parseInt(num) < 10){
                num = '0'+ num
            }
            return num
        },
        // 获取数据
        getData() {
            var that = this
            that.loading = true
            stockStatistic(that.params).then(res => {
                that.totalData = {
                    buyCounts: 0,  //入库总数
                    lastCounts: 0,  //剩余总数
                    allMoney: 0,  //库存总金额
                }

                let lists = res.data.data.filter(item => {
                    item.title = item.abbr_name ? item.abbr_name : item.name
                    if (item.image_show && item.image_show.url){
                        item.imageUrl = item.image_show.url
                    }else{
                        item.imageUrl = 'https://anhuiyaoying.com/icon/default.png'
                    }
                    item.unitName = item.unit_show?item.unit_show.name:item.unit

                    item.inventory_unit_price_name = item.inventory_unit_price.toFixed(2)
                    item.valuation_remaining_price_name = item.valuation_remaining_price.toFixed(2)

                    that.totalData.buyCounts = that.$common.plusFloat(that.totalData.buyCounts, item.inbound)
                    that.totalData.lastCounts = that.$common.plusFloat(that.totalData.lastCounts, item.remaining)
                    that.totalData.allMoney = that.$common.plusFloat(that.totalData.allMoney, item.valuation_remaining_price)
                    return item
                })
                that.totalLists = lists
                that.total = lists.length
                that.pageParam.page = 1
                that.getNextPageList()
                that.loading = false
            })
        },
        handleSizeChange(val) {
            this.pageParam.num = val
            this.getNextPageList()
        },
        getNextPageList() {
            let totalPage = 0  //总页数
            if (this.total % this.pageParam.num === 0){  //整除
                totalPage = Math.trunc(this.total / this.pageParam.num)
            }else{
                totalPage = Math.trunc(this.total / this.pageParam.num) + 1
            }

            function chunkArray(arr, size) {
                const result = [];
                for (let i = 0; i < arr.length; i += size) {
                    result.push(arr.slice(i, i + size));
                }
                return result;
            }

            if (this.pageParam.page <= totalPage){
                let groups = chunkArray(this.totalLists, this.pageParam.num)
                this.tableData = groups[this.pageParam.page-1]
            }else{
                this.tableData = []
            }
        },
        dateChange(value) {
            if(value && value.length){
                this.params.start_date = value[0]
                this.params.end_date = value[1]
                this.params.order_type = 'customize_date'
            }else{
                this.params.start_date = this.params.end_date = null
                this.params.order_type = ''
            }
            this.getData()
        },
        // 库存流水
        toDetail(item) {
            this.option = item
            this.pageName = 'flow'
        },
        // 打印
        handlePrint() {
            
        },
    }
}
</script>

<style lang="less" scoped>
    @import '../../style/mixin.less';
    .btns {
        float: right;
        height: 40px;
        display: flex;
        align-items: center;
        padding-right: 20px;
    }
    .flex_div {
        display: flex;
        flex-direction: column;
        align-items: center;
        .top_title {
            font-size: 14px;
            color: #606266;
            margin-bottom: 14px;
        }
        .money {
            font-size: 22px;
            font-weight: bold;
            // color: red;
            &::before {
                content: '￥';
                font-size: 14px;
            }
        }
        .order {
            &::before {
                content: '';
            } 
        }
        .red {
            color: red;
        }
        .green {
            color: @blue;
        }
    }
    .customer_name {
        cursor: pointer;
        &:hover {
            color: red;
        }
    }
</style>